<template>
    <div class="global_title" :style="{marginTop: top + 'px', marginBottom: bottom + 'px'}">
        <div class="title_wrap">
            <!-- <span /> -->
            <div :style="{marginTop: marginTop + 'px', marginLeft: marginLeft + 'px'}">
                <p>·{{ title }}</p>
                <p>{{ lable }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GlobalTitle',
    props: {
        title: {
            type: String,
            default: '标题组件'
        },
        lable: {
            type: String,
            default: ''
        },
        fontSize: {
            type: Number,
            default: 18
        },
        // 标题伸缩距离
        marginTop: {
            type: Number,
            default: -12
        },
        marginLeft: {
            type: Number,
            default: 8
        },
        top: {
            type: Number,
            default: 30
        },
        bottom: {
            type: Number,
            default: 30
        }
    }
}
</script>

<style lang="scss" scoped>
.global_title {
    width: 100%;
    height: 40px;
    .title_wrap {
        >span {
            display: block;
            width: 18px;
            height: 18px;
            background: #cdf8ed;
        }
        >div {
            display: flex;
            align-items: center;
            >p:nth-child(1) {
                font-size: 18px;
                font-weight: 600;
                color: #172b4d;
                margin-right: 5px;
            }
            >p:nth-child(2) {
                font-size: 12px;
                font-weight: 500;
                color: #8e9aab;
                line-height: 18px;
            }
        }
    }
}
</style>
